import React, { useState, useLayoutEffect } from "react";

const App = () => {
  const [width, set_width] = useState(200);

  // 优先于useEffect执行，是componentDidMount以后同步执行，会阻塞代码
  useLayoutEffect(() => {
    set_width(500);
  }, []);

  return (
    <>
      <h3>useLayoutEffect</h3>
      <div
        style={{
          width: width,
          height: 200,
          background: "red",
        }}
      >
        1
      </div>
    </>
  );
};

export default App;
